<template>
    <button type="button" :id="buttonId" :class="buttonClass"> {{ buttonName }} </button>
</template>

<script>
export default {
  name: 'FunctionButtons',
  // data: function () {
  //        return {
  //            ThisId: 'countup',
  //            ThisClass: 'default-button'
  // }
  // },
  props: {
    buttonId: {
      type: String,
      default: 'submit-button-id'
    },
    buttonClass: {
      type: String,
      default: 'submit-button-class'
    },
    buttonName: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
  button {
    height: 40px;
    width: 98px;
    border-radius: 5px;
    border: none;
    padding: 9px;
    font-size: 16px;
    color: black;
    background-color: skyblue;
    font-weight: 600;
    box-shadow: 0 2px 4px 0;
    margin-top: 20px;
  }
  .click-up {
    width: 98px;
    height: 40px;
    background-color: aquamarine;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  }
  .click-down {
    width: 98px;
    height: 40px;
    background-color: darksalmon;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  }
  .write-submit {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  }
  .home-func {
    margin-left: 5px;
    margin-right: 5px;
    font-weight: bold;
    color: #42b983;
    background-color: white;
  }
</style>
